<template>
    <!-- <div class="article"></div> -->
    <van-cell 
        class="article-item" 
        :to="{ 
            name:'article',
            params:{
                articleId:channel.art_id
            }
         }"
    >
        <div slot="title" class="title van-multi-ellipsis--l3">
            {{channel.title}}
        </div>
        <div slot="label">
            <div class="cover-wrap" v-if="channel.cover.type == 3">
                <div 
                    class="cover-wrap-item"
                    v-for="(img,index) in channel.cover.images"
                    :key="index"
                >
                        <van-image
                            height=73
                            fit="cover"
                            :src="img"
                        />
                </div>
            </div>
            <div class="label-wrap">
                <span>{{channel.aut_name}}</span>
                <span>{{channel.comm_count}}评论</span>
                <span>{{channel.pubdate | relativeTime}}</span>
            </div>
        </div>
        <van-image
            v-if="channel.cover.type == 1"
            class="right-cover"
            fit="cover"
            :src="channel.cover.images[0]"
        />
    </van-cell>
</template>
<script>
export default {
    name:'ArticleItem',
    props:{
        channel:{
            type:Object,
            required:true
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        
    }
}
</script>
<style lang="less" scoped>
    .article-item{
        .title{
            font-size: 16px;
            color: #3a3a3a;
        }
        .cover-wrap{
            display: flex;
            .cover-wrap-item{
                flex: 1;
                width:100%;
                height: 73px;
                &:not(:last-child){
                    padding-right: 4px;
                }
            }
        }
        .label-wrap{
            padding-top: 13px;
            font-size: 11px;
            color: #b4b4b4;
            span{
                margin-right: 12px;
            }
        }
        /deep/.van-cell__value{
            flex: unset;
            width: 116px;
            height: 73px;
            margin-left: 12px;
        }
        .right-cover{
            width:116px;
            height:73px;
        }
    }
</style>